<!DOCTYPE html>

<html lang="zh_cmn">

<head>

    <meta charset=utf-8 />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    <title></title>

    <style>

        .head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}

        .head{top:0;}

        .foot{bottom:0;}

        .main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}

    </style>

</head>

<body>

<header class="head">顶部固定区域</header>

<article class="main"  id="wrapper">

    <div>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <p>当内容欲出隐藏时，灰色区域可上下拖动</p>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        <input type="text" value="" class="inputtext"> <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

        content <br>

    </div>

</article>

<footer class="foot">底部固定区域</footer>

</body>

</html>